<script setup lang='ts'>
import { ref } from 'vue';
const username = ref('');
const password = ref('');
const sms = ref('')
const onSubmit = (values: string) => {
    console.log('submit', values);
};
</script>

<template>
    <van-nav-bar title="修改密码"/>
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <!-- 邮箱 -->
            <van-field v-model="username" name="邮箱" label="邮箱" placeholder="请填写邮箱"
                :rules="[{ required: true, message: '请填写邮箱' }]" />
                <!-- 验证码 -->
            <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码" :rules="[{ required: true, message: '请填写验证码' }]" >
                <template #button>
                    <van-button size="small" type="primary">发送验证码</van-button>
                </template>
            </van-field>
            <!-- 密码 -->
            <van-field v-model="password" type="password" name="密码" label="密码" placeholder="请填写密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            <div class="login">
                <span></span>
                <RouterLink :to="{name:'login'}">登录账号</RouterLink>
            </div>
        </van-cell-group>

        <div style="margin: 16px;">
            <van-button block native-type="submit" type="primary">修改密码</van-button>
        </div>
    </van-form>
</template>

<style scoped>
.van-field {
    margin-top: 20px;
}

.login {
    display: flex;
    box-sizing: border-box;
    padding: 15px;
    font-size: 12px;
    justify-content: space-between;
}

a {
    color: black;
}
</style>